<mat-card>Add notification</mat-card>
<div class="container">
  <mat-spinner *ngIf="!areEmployeesLoaded"></mat-spinner>
  <div *ngIf="areEmployeesLoaded" [formGroup]="form">
    <mat-form-field>
      <mat-label>Instruction</mat-label>
      <input matInput placeholder="Instruction" name="instruction" formControlName="instruction" required>
      <mat-error *ngIf="instruction.invalid">{{getErrorInstruction()}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Description</mat-label>
      <input matInput placeholder="Description" name="description" formControlName="description">
      <mat-error *ngIf="description.invalid">{{getErrorDescription()}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Consignees</mat-label>
      <mat-select placeholder="Consignees" formControlName="consigneeIds" name="consigneeIds" multiple required>
        <mat-option *ngFor="let c of consignees" [value]="c.id">
          {{c.firstName}} {{c.lastName}} ({{c.role | enumeration}})
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Type</mat-label>
      <mat-select placeholder="Type" formControlName="type" name="type" required>
        <mat-option *ngFor="let t of types" [value]="t">
          {{t | titlecase}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <button mat-raised-button (click)="submitForm()" [disabled]="form.invalid">Add notification</button>
  </div>
</div>
